<template>
	<div>
		<el-button type="text" @click="selectUserAddress">点击打开 Dialog</el-button>

		<el-dialog title="我的收货地址" :visible.sync="dialogVisible" width="60%" :before-close="handleClose">
			<el-button type="primary" @click="addDialogVisible = true">添加地址</el-button>
			<center>
				<el-table style="width: 100%;" :row-class-name="tableRowClassName" :data="address">
					<el-table-column prop="username" label="用户名" width="180">
					</el-table-column>
					<el-table-column prop="phone" label="电话" width="180">
					</el-table-column>
					<el-table-column prop="addname" label="地址" width="180">
					</el-table-column>
					<el-table-column label="操作">
						<!-- 作用域插槽 -->
						<template slot-scope="scope">
							<el-button type="danger" icon="el-icon-delete" size="mini"
								@click="delAddress(scope.row.addressid)"></el-button>

							<el-button type="success" @click="selectAddressDetaties(scope.row.addressid)"
								icon="el-icon-star-off" size="mini"></el-button>
						</template>
					</el-table-column>
				</el-table>
			</center>
			<!-- size-change:每页显示的条数改变时触发的函数
				      current-change：当前页码改变时触发的函数
				-->
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="queryinfo.pagenum" :page-sizes="[1, 2, 4, 5]" :page-size="queryinfo.pagesize"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>

			<span slot="footer" class="dialog-footer">
				<center>
					<el-button @click="dialogVisible = false">关闭</el-button>
				</center>
			</span>
			<!-- 内置1 -->
			<el-dialog title="地址详情" :visible.sync="detatiesDialog" width="60%" :before-close="handleClose"
				append-to-body>
				<el-descriptions direction="vertical" :column="4" border label-class-name="my-label">
					<el-descriptions-item label="用户名"  content-class-name="content1">
						{{deteties.username}}
					</el-descriptions-item>
					<el-descriptions-item label="手机号" content-class-name="content2">
					{{deteties.phone}}
					</el-descriptions-item>
					<el-descriptions-item label="居住地" content-class-name="content3">
					{{deteties.addname}}
					</el-descriptions-item>
					<el-descriptions-item label="详细地址" content-class-name="content4" :contentStyle="{'text-align': 'left'}">
					{{deteties.detaties}}
					</el-descriptions-item>
				</el-descriptions>
				<span slot="footer" class="dialog-footer">
	
							<el-button @click="levelDetaties">关闭</el-button>
							<el-button type="primary" @click="toUpdate(deteties.addressid)">修改</el-button>
				</span>
				<!-- 内置2 -->
				<!-- 修改地址信息的对话框 -->
				<!-- visible.sync:当前对话框是否显示
				     before-close:关闭前的提示-->
				<el-dialog title="修改用户信息" :visible.sync="updateDialogVisible" width="30%" :before-close="updatereset"
					append-to-body="true">
					<!--修改用户信息的表单 -->
					<el-form ref="updateref" :rules="addrules" :model="updateAddressObject" label-width="100px">
						<el-form-item label="电话" prop="phone">
							<el-input v-model="updateAddressObject.phone" style="width: 60%;"></el-input>
						</el-form-item>
						<el-form-item label="地址">
							<el-cascader v-model="addressAll" :options="cityData" :props="cityProp" @change="updateChange">	
							</el-cascader>
						</el-form-item>
						<el-form-item label="详细地址" prop="detaties">
							<el-input v-model="updateAddressObject.detaties" style="width: 60%;"></el-input>
						</el-form-item>
					</el-form>
					<!-- 取消和确定按钮 -->
					<span slot="footer" class="dialog-footer">
						<el-button @click="updatereset">取 消</el-button>
						<el-button type="primary" @click="update">确定修改</el-button>
					</span>
				</el-dialog>
			</el-dialog>

			<!-- 添加信息的对话框 -->
			<!-- visible.sync:当前对话框是否显示
			     before-close:关闭前的提示-->
			<el-dialog title="添加用户信息" :visible.sync="addDialogVisible" width="30%" :before-close="addressreset" append-to-body="true">
				<!--添加用户信息的表单 -->
				<el-form ref="addressref" :rules="addrules" :model="insertAddress" label-width="100px">
					<el-form-item label="电话" prop="phone">
						<el-input v-model="insertAddress.phone" placeholder="请输入手机号" style="width: 60%;"></el-input>
					</el-form-item>
					<el-form-item label="地址">	
						<el-cascader v-model="addressAll" :options="cityData" :props="cityProp" @change="addressChange">	
						</el-cascader>
					</el-form-item>
					<el-form-item label="详细地址" prop="detaties">
						<el-input v-model="insertAddress.detaties" placeholder="请输入详细地址信息" style="width: 60%;"></el-input>
					</el-form-item>
				</el-form>
				<!-- 取消和确定按钮 -->
				<span slot="footer" class="dialog-footer">
					<el-button @click="addressreset">取 消</el-button>
					<el-button type="primary" @click="insert">确 定</el-button>
				</span>
			</el-dialog>

		</el-dialog>


	</div>



</template>

<script>
	import qs from 'qs';
	import cityData from '../citydata.js';
	export default {
		data() {
			var checkMobile = ((rule, value, callback) => {
				if (!value) { //value为空
					return callback(new Error('手机号不能为空'))
				}
				//判断是否符合手机号的正则表达式
				var reg = /^[1][0-9]{10}$/
				if (!reg.test(value)) {
					return callback(new Error('手机号格式不合法'))
				}
				return callback();
			});
			return {
				cityData: cityData,
				queryinfo: {
					userid: '',
					pagenum: 1, //访问的页码
					pagesize: 4 //默认每页展示的条数
				},
				// 用户的地址列表
				dialogVisible: false,
				address:[],
				total: 0,
				// 保存地址详细信息
				deteties: {

				},
				// 详细地址信息
				detatiesDialog: false,
				// 修改地址信息
				updateDialogVisible: false,
				updateAddressObject: {
					addressid:'',
					userid:'',
					phone:'',
					addname:'',
					detaties: '',
					username: ''
				},
				addrules: {
					phone: [{
						validator: checkMobile,
						trigger: 'blur'
					}],

				},
				// 添加对话框
				addDialogVisible: false,
				insertAddress: {
					userid:'',
					phone:'',
					addname:'',
					detaties:''
				},
				addressAll:[],
				cityProp:{
					value:'value',
					label:'label',
					children:'children'
				}
				


			};
		},
		methods: {
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			},
			async selectUserAddress() {
				this.queryinfo.userid = window.sessionStorage.getItem("userid");
				this.dialogVisible = true
				var res = await this.$http.post("selectUserAddress", qs.stringify(this.queryinfo));
				// console.log(res)
				if (res.data.code == 400) {
					this.$message.error(res.data.message);
				} else {
					console.log(res.data);
					this.address = res.data.data.list;
					this.total = res.data.data.total;

				}
			},
			// 每页条数改变的函数
			handleSizeChange(newpagesize) {

				this.queryinfo.pagesize = newpagesize;
				this.queryinfo.pagenum = 1;
				this.selectUserAddress()
			},
			// 改变查询页数的函数
			handleCurrentChange(newpagenum) {
				this.queryinfo.pagenum = newpagenum;
				this.selectUserAddress()
			},
			tableRowClassName({
				row,
				rowIndex
			}) {
				if (rowIndex % 2 == 1) {
					return 'warning-row';
				} else if (rowIndex % 2 == 0) {
					return 'success-row';
				}
				return '';
			},
			async selectAddressDetaties(id) {
				this.detatiesDialog = true
				this.queryinfo.userid = window.sessionStorage.getItem("userid");
				var res = await this.$http.get('selectByAddressid?addressid=' + id + '&userid=' + this.queryinfo.userid);
				console.log(res.data)
				if (res.data.code == 200) {
					this.deteties = res.data.data;
				} else {
					this.$message.error('查询失败');
				}
				// console.log(this.deteties)
			},
			delAddress(id) {
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}, ).then(async () => {
					this.queryinfo.userid = window.sessionStorage.getItem("userid");
					var res = await this.$http.get('deleteAddress?addressid=' + id + '&userid=' + this
						.queryinfo.userid);
					if (res.data.code == 200) {
						this.$message.success(res.data.message);
						this.selectUserAddress()
					} else {
						this.$message.error(res.data.message);
					}
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			// 修改对话框中的取消事件
			updatereset() {
				// 关闭对话框
				this.updateDialogVisible = false;
				this.$refs.updateref.resetFields();
				this.filelist = [];
			},
			// 修改确定
			update() {
				this.$refs.updateref.validate(async (bo) => {
					if (bo) {
						//关闭添加对话框
						this.updateDialogVisible = false;
						var res = await this.$http.post('updateAddress', qs.stringify(this.updateAddressObject));
						// 处理返回值信息，并给出不同的信息提示
						if (res.data.code == 400) { // 添加失败
							this.$message.error(res.data.message);
						} else {
							this.$message.success(res.data.message);
						}
						
						this.selectAddressDetaties(this.deteties.addressid)
					} else {
						this.$message.error('格式不合法');
					}
				})
			},
			async toUpdate(id) {
				//从后端根据id查询当前用户信息
				var res = await this.$http.get('selectAddressByid?addressid=' + id);
				if (res.data.code == 200) {
					// 赋予对象
					this.updateAddressObject = res.data.data;
					// 展示修改的对话框
					this.updateDialogVisible = true;
					console.log(this.updateAddressObject)
				} else {
					this.$message.error(res.data.message);
				}
			},
			// 添加地址确定
			insert() {
				this.$refs.addressref.validate(async(bo)=>{
						if(bo){
							this.addDialogVisible = false;
							this.insertAddress.userid=window.sessionStorage.getItem("userid")
							var res=await this.$http.post('addAddress',qs.stringify(this.insertAddress));
							// 处理返回值信息，并给出不同的信息提示
							if(res.data.code == 400 ){  // 添加失败
								this.$message.error(res.data.message);
							}else{
								this.$message.success(res.data.message);
							}
							
							this.selectUserAddress()
							this.$refs.addressref.resetFields();
							
						}else{
							this.$message.error('格式不合法');
						}
					})
				},
			addressreset() {
				this.addDialogVisible = false
				this.addressAll=[]
				this.$refs.addressref.resetFields();
			},
			addressChange(value){		
					this.addressAll=value;
					var name = "";
					for(var i=0;i<this.addressAll.length;i++){
						name += this.addressAll[i] + ""
					}
					// this.addressAll.map((item) => (name += cityData[item] + "")); 
					this.insertAddress.addname = name;
					console.log(this.addressAll)
					console.log(this.insertAddress.addname)
			},
			updateChange(value){
					this.addressAll=value;
					var name = "";
					for(var i=0;i<this.addressAll.length;i++){
						name += this.addressAll[i] + ""
					}
					// this.addressAll.map((item) => (name += cityData[item] + "")); 
					this.updateAddressObject.addname = name;
					console.log(this.addressAll)
					console.log(this.updateAddressObject.addname)
			},
			levelDetaties(){
				this.detatiesDialog=false;
				this.selectUserAddress()
			}


		}
	};
</script>

<style scoped="scoped">
	.my-label {
		background: #E1F3D8;
	}

	.content1 {
		width: 150px;
		background: #FDE2E2;
	}
	.content2{
		width: 150px;
		background-color: aquamarine;
	}
	.content3{
		width: 180px;
		background-color:antiquewhite;
	}
	.content4{
		background-color:#7FFFD4;
	}

	.el-table .warning-row {
		background: #FDE2E2;
	}

	.el-table .success-row {
		background: #5adafa;
	}
</style>
